
<template>
    <div class="tmpl"  >
        <nav-bar title="商品购买"></nav-bar>
        <!--        ref="loadmore"-->
        <!--        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">-->
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="heiehi" ref="loadmore">

            <ul class="mui-table-view mui-grid-view" >
                <li   class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(getgoods,index) in getgoods" :key="index">
                    <router-link :to="{name:'goumai_detail',query:{id:getgoods.id}}">
                        <img class="mui-media-object" v-lazy="getgoods.img_url">
                    </router-link>
                    <div class="mui-media-body">{{getgoods.title}}</div>
                    <div class="desc">
                        <div class="sell">
                            <span>{{getgoods.sell_price}}</span>
                            <s>{{getgoods.market_price}}</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩{{getgoods.stock_quantity}}件
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </mt-loadmore>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                page:1,
                getgoods:[],
                allLoaded:false, //是否禁止触发上拉函数
                heiehi:false//是否自动触发上拉函数
            }
        },
        methods:{
            loadBottom() {
                // 加载更多数据
                console.log("上拉触发了......");
                this.loadMore();
            },
            loadMore(){
                this.Ajax.get("getgoods?pageindex="+(++this.page))
                    .then(res=>{
                        this.getgoods=this.getgoods.concat(res.data.message);
                        if(res.data.message.length!=6){
                            this.allLoaded=true;// 若数据已全部获取完毕
                            // bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。
                        }
                        this.$refs.loadmore.onBottomLoaded();
                        // console.log(res.data.message);
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            }
        },
        created(){
            this.Ajax.get("getgoods?pageindex="+this.page)
                .then(res=>{
                    this.getgoods=res.data.message;
                    // console.log(res.data.message);
                })
                .catch(err=>{
                    console.log(err);
                })
        }
    }

</script>
<style scoped>
    .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
        margin: 0px;
        padding: 0px;
        border: 1px solid #5c5c5c;
        box-shadow: 0 0 4px #666;
    }

    .sell > span {
        float: left;
        color: red;
        text-align: left;
    }

    .detail >.hot {
        float: left;
        text-align: left;
        font-size: 15px;
    }

    .detail >.count {
        float: right;
        text-align: right;
        font-size: 15px;
    }

    /*a{*/
    /*    display: block;*/
    /*}*/
    /*撑开，去除浮动没有的高度*/

    .detail {
        overflow: hidden;
    }

    .desc {
        color: rgba(92, 92, 92, 0.8);
        background-color: rgba(0, 0, 0, 0.2);
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
        height: 200px;
    }
</style>